<template>
  <div class="add_main">
    <div class="search">
      <div class="search-wrapper">
        <input ref="inputs" type="text" placeholder="请输入小区的名称" @keyup.enter="searchVillage" @input="searchVillage"
               v-model="keyword">
        <span class="search-icon" @click="searchVillage"></span>
      </div>
      <div class="now-plot">所在小区</div>
    </div>
    <mt-index-list>
      <mt-index-section :index="index" v-for="(item,index) in data">
        <div v-for="(list,index) in item" @click="choose(list)">
          <mt-cell :title="list.title"></mt-cell>
        </div>
      </mt-index-section>
    </mt-index-list>
  </div>
</template>
<style lang="scss">
  .add_main {
    margin-bottom: 20%;
    padding-top: 80px;
    .search {
      width: 100%;
      position: fixed;
      top: 40px;
      left: 0;
      background-color: #fff;
      text-align: center;
      height: 44px;
      line-height: 44px;
      .now-plot {
        padding-left: 10px;
        text-align: left;
        font-size: 15px;
        height: 40px;
        line-height: 40px;
        background-color: #D9D9D9;
      }
      .search-wrapper {
        display: inline-block;
        height: 30px;
        line-height: 30px;
        width: 92%;
        margin: 0 10px;
        border-radius: 4px;
        background-color: #e6e6e6;
        input {
          width: 118px;
          font-size: 14px;
          outline: none;
          border: none;
          background-color: #e6e6e6;
          &::-ms-input-placeholder {
            text-align: center;
          }
          &::-webkit-input-placeholder {
            text-align: center;
          }
        }
        .search-icon {
          display: inline-block;
          width: 17px;
          height: 17px;
          background-size: 17px 17px;
          background-repeat: no-repeat;
          background-image: url("./images/search@2x.png");
          vertical-align: middle;
        }

      }
    }
    .mint-cell-title {
      .mint-cell-text {
        line-height: 46px;
      }
    }
  }
</style>
<script>
  import {searchKeyword} from "../../api/village.js";

  export default {
    name: 'Me2',
    data() {
      return {
        data: [],
        keyword: ''
      }
    },
    created() {
      this.getVillage()
    },
    methods: {
      //获取小区信息
      getVillage() {
        const url = 'https://ynwx.zgwyzxw.cn/index.php/home/city/village2'
        this.$http.get(url).then(res => {
          // console.log(res)
          this.data = res.data.data
          // console.log(this.data)
        })
      },
      choose(list) {
        console.log(list.title)
      },
      // 搜索小区键盘输入按enter间获取
      searchVillage() {
        searchKeyword(this.keyword).then(res => {
          if (res.code === 200) {
            this.data = res.data
          }
        })
      },
    }
  }
</script>
